﻿<div>
    <div style="margin-bottom: 16px;">
        <Button @onclick="(e)=>Add()">ADD</Button>
    </div>
    <Tabs Type="@TabType.EditableCard" HideAdd>
        @foreach (var temp in _panes)
        {
            TabPane pane = temp;
            <TabPane Key="@pane.Key">
                <Tab>@pane.Tab</Tab>
                <ChildContent>@pane.ChildContent</ChildContent>
            </TabPane>
        }
    </Tabs>
</div>

@code{
    private List<TabPane> _panes = new List<TabPane>();
    private static int btnIndex = 1;
    private void Add()
    {
        int index = ++btnIndex;
        _panes.Add(new TabPane(
            key: index.ToString(),
            tab: (b) => b.AddContent(0, $"Tab {index}"),
            childContent: (b) => b.AddContent(0, $"Content of Tab Pane {index}")
        ));

        StateHasChanged();
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        for (int i = 0; i < btnIndex + 1; i++)
        {
            int index = i;
            _panes.Add(new TabPane(
                key: index.ToString(),
                tab: (b) => b.AddContent(0, $"Tab {index}"),
                childContent: (b) => b.AddContent(0, $"Content of Tab Pane {index}")
            ));
        }
    }
}